<template name="goodsNumAre">
	<view class="goodsNumAre borderR">
		<view class="calc attr-content">
			<view class="display flow a-t">
				<view class="display flow title">
					<image :src="goodsList.head_img"></image>
					<view class="display column right" v-if="!isIntegral">
						<block v-if="goodsList.num!=0">
							<text class="price">¥{{goodsList.price}}</text>
							<text class="stock">库存{{ goodsList.num }}件</text>
						</block>
						<block v-else>无货</block>
					</view>
					<view class="display column right" v-else>
						<text class="price">{{integral}}积分</text>
					</view>
					<uni-icons :type="'closeempty'" :color="blackColor" size="20" @click="goodsNumCancle"/>
				</view>
			</view>
			<view class="selectCount display flow">
				<text>数量</text>
				<uni-number-box :min="1" :max="isIntegral?99:goodsList.num" :value="numberValue" @change="numChange"/>
			</view>
		</view>
		<button class="completeBtn themeBgColor" @click="complete()" :disabled="goodsList.num&&goodsList.num==0">确认</button>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	export default {
		name: 'goodsNumAre',
		props: ['goodsList','goodsNum','isIntegral'],
		data() {
			return {
				numberValue: this.goodsNum,
				integral: 0,
				blackColor: this.global.blackColor
			};
		},
		watch:{
			goodsList(newV){
				if(newV){
					this.integral = newV.integral
				}
			}
		},
		methods:{
			numChange(value){
				// console.log(value);
				this.numberValue = value
				if(this.isIntegral){
					this.integral = util.calculate(this.goodsList.integral,this.numberValue)
				}
			},
			complete(){
				this.$emit('getGoodsNum',this.numberValue)
			},
			goodsNumCancle(){
				this.$emit('goodsNumCancle')
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/specification.scss';
	/* 规格弹窗 */
	.goodsNumAre{
		@include width;
		max-height: 600rpx;
		background: white; 
	}
	.selectCount {
		@include margin(50rpx,'top');
	}
</style>
